
<template>
  <a-modal
    :title="'工艺模板'"
    :visible="true"
    width="70%"
    :footer="null"
    @cancel="reset"
  >
    <div class="background">
      <a-card style="margin-bottom: 10px">
        <a-row>
          <a-col :span="24">
            <a-form
              layout="inline"
              :form="form"
              @submit="handleSubmit"
            >
            <a-form-item label="名称">
              <a-input
                allow-clear
                style="width:300px"
                placeholder="请输入名称"
                v-model="name"
              ></a-input>
            </a-form-item>
              <a-form-item label="描述">
                <a-input
                  allow-clear
                  style="width:300px"
                  placeholder="请输入描述"
                  v-model="description"
                ></a-input>
              </a-form-item>
              <a-form-item>
                <a-button
                  type="primary"
                  html-type="submit"
                >搜索</a-button>
              </a-form-item>
            </a-form>
          </a-col>
        </a-row>

      </a-card>
      <a-card>
        <a-table
          :loading="loading"
          :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
          :columns="columns"
          :data-source="dataSource"
          :pagination="pagination"
          @change="handleTableChange"
        >
        </a-table>
      </a-card>
     <div class="info-action">
         <a-button
        type="primary"
        style="margin-left: 8px"
        @click="submit"
      >
        提交
      </a-button>
     </div>
    </div>
  </a-modal>

</template>

<script>
import { getList, getDictChildList } from '@api/rd/index'
const columns = [
  {
    title: '名称',
    dataIndex: 'name'
  },
  {
    title: '描述',
    dataIndex: 'description'
  }
]

export default {
  components: {},
  data() {
    return {
      columns,
      selectedRowKeys: [],
      templateList: [],
      form: this.$form.createForm(this),
      loading: false,
      description: '',
      partName:undefined,
      partId: undefined,
      dataSource: [],
      pagination: {
        total: 0,
        current: 1,
        pageSize: 10,
        pageSizeOptions: ['10', '20', '30', '40'],
        showQuickJumper: true,
        showSizeChanger: true,
        showTotal: total => `共 ${total} 条记录`,
        itemRender: (current, type, originalElement) => {
          if (type === 'prev') {
            return <a>上一页</a>
          } else if (type === 'next') {
            return <a>下一页</a>
          }
          return originalElement
        }
      }
    }
  },
  mounted() {
    this.loadData()
  },
  methods: {
    reset() {
      this.$emit('close')
    },
    handleTableChange(pagination) {
      this.pagination = pagination
      this.loadData()
    },
    onSelectChange(selectedRowKeys, selectedRows) {
      this.templateList = selectedRows
      console.log(selectedRowKeys);
      this.selectedRowKeys = selectedRowKeys
    },
    submit(){
      this.$emit('close', this.templateList)
    },
    handleSubmit(e) {
      e.preventDefault()
      this.loadData(1)
    },
    async loadData(key) {
      this.loading = true
      if (key) {
        this.pagination.current = 1
      }
      const params = {
        current: this.pagination.current,
        size: this.pagination.pageSize
      }
      if (this.description) {
        params.description = this.description
      }
      if (this.name) {
        params.name = this.name
      }
      try {
        const res = await getList('template', params)
        if (res.code == 200) {
          this.dataSource = res.data.records
          this.pagination.total = res.data.total
        } else {
          this.$message.error(res.msg)
        }
      } catch (error) {
        this.$message.error('获取工艺模板列表失败！')
      } finally {
        this.loading = false
      }
    }
  }
}
</script>
<style lang="less" scoped>
.background {
  background: transparent;
}
.ant-modal-body {
  display: flex;
  justify-content: space-between;
}
.info-action {
  display: flex;
  margin-top: 10px;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  // margin-bottom: 20px;
}
</style>